<template>
	<view class="container">
		<uni-nav-bar height="150rpx" :border="false" title="神领快递"></uni-nav-bar>
		<view class="title">
			<view v-if="isMobile" class="login-title">手机号登录</view>
			<view v-if="!isMobile" class="login-title">账号登录</view>
			<view v-if="isMobile" class="change-btn" @click="isMobile=false">账号登录<van-icon name="play" size="30rpx" color="#EF4F3F" /></view>
			<view v-if="!isMobile" class="change-btn" @click="isMobile=true">手机号登录<van-icon name="play" size="30rpx" color="#EF4F3F" /></view>
		</view>
		<view class="login-form">
		<uni-forms :modelValue="loginForm" ref="loginForm" :rules="rules">
					<uni-forms-item name="account">
						<uni-easyinput v-if="!isMobile" type="text" v-model="loginForm.account" :inputBorder="false"  placeholderStyle="color:#818181;font-size:32rpx;"  placeholder="请输入账号" />
						<uni-easyinput v-if="isMobile" type="text" v-model="loginForm.account" :inputBorder="false"  placeholderStyle="color:#818181;font-size:32rpx;"  placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item name="password">
						<uni-easyinput v-if="!isMobile" type="password" v-model="loginForm.password" :inputBorder="false"  class="login-ipt" placeholderStyle="color:#818181;font-size:32rpx;" placeholder="请输入密码" />
						<uni-easyinput v-if="isMobile" type="password" v-model="loginForm.password" :inputBorder="false"  class="login-ipt" placeholderStyle="color:#818181;font-size:32rpx;" placeholder="请输入验证码" />
					</uni-forms-item>
				</uni-forms>
				<button @click="loginFn" class="login-btn">登录</button>
		</view>
	</view>
</template>

<script>
	import { loginApi } from '@/api/user.js'
	export default {
		data() {
			return {
				isMobile: false,
				loginForm: {
					account: 'xbsj001',
					password: '123456'
				},
				rules: {
					account: {
						rules:[{
							required: true,
							errorMessage: '请输入账号',
						}]
					},
					password: {
						rules:[{
							required: true,
							errorMessage: '请输入密码',
						}]
					}
				}
			};
		},
		methods:{
		    loginFn(){
				uni.showLoading()
				this.$refs.loginForm.validate().then(async res => {
								uni.hideLoading()
								await this.$store.dispatch('user/login', res)
								uni.switchTab({
									url:'/pages/my/my'
								})	
							}).catch(err => {
								uni.hideLoading()
								console.log('表单错误信息：', err);
							})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 60rpx;
		::v-deep .uni-nav-bar-text{
			font-size: 35rpx !important;
			font-weight: 600 !important;
			color:#000 !important;
		}
	}
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.title {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		.login-title {
			font-size: 48rpx;
			font-weight: 600;
			line-height: 66rpx;
		}

		.change-btn {
			color: #EF4F3F;
			line-height: 66rpx;
			font-weight: 500;
		}
	}
	.login-form{
		margin-top: 60rpx;

		.login-btn{
			width: 618rpx;
			height: 100rpx;
			background: #EF4F3F;
			color: #fff;
			font-weight: 400;
			font-size: 36rpx;
			border-radius: 49.54rpx;
			margin-top: 100rpx;
		}
		::v-deep .uni-easyinput__content-input{
			height: 90rpx;
			border-bottom: 1rpx solid #f4f4f4;
		}
	}
</style>